<template>
  <div>
    <div>关键字：<tiny-input v-model="query" placeholder="输入关键字，观察下面的高亮"></tiny-input></div>
    <div v-highlight-query="query">
      <ul>
        <li v-for="line in list" :key="line">
          {{ line }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { HighlightQuery } from '@opentiny/vue-directive'
import { TinyInput } from '@opentiny/vue'

export default {
  directives: { HighlightQuery },
  components: {
    TinyInput
  },
  data() {
    return {
      query: '',
      list: ['一片一片又一片', '两片三片四五片', '六片七片八九片', '飞入芦花都不见']
    }
  }
}
</script>

<style scoped>
.tiny-input {
  width: 280px;
  margin-bottom: 20px;
}
li {
  line-height: 2;
}
</style>
